<template>
  <div class="SearchPopup-container">
    <van-search
      v-model="value"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
  />
  <!--  v-model="value"   双向绑定数据
 -->
  <!-- blockShow为1 -->
  <HistoryHot
  v-if="blockShow===1"
  :historydataList="historydataList"
  :hotdataList="hotdataList"
  @tagClick="tagClick"
  ></HistoryHot>
<!-- blockShow为2 -->
  <SearchTipsList
  v-else-if="blockShow===2"
  :searchTipList="searchTipList"
  @tipsClick="tagClick"
  ></SearchTipsList>
  <!-- blockShow为3 -->
  <SearchProcucts
  v-else
  :filterCategory="filterCategory"
  :goodsList="goodsList"
  @categorychange="categorychange"
  @priceChange="priceChange"
  ></SearchProcucts>
  </div>
</template>

<script>
import HistoryHot from '@/components/HistoryHot.vue'
import SearchTipsList from '@/components/SearchTipsList.vue'
import SearchProcucts from '@/components/SearchProducts.vue'
import { getSearchData, getSearchTipsData, getProductsListData } from '@/request/api.js'
export default {
  data() {
    return {
      // 搜素文字
      value: '',
      // 提示文本
      placeholderVal: '',
      // 为1展示搜索历史列表
      // 为2 展示搜索提示列表
      // 为3搜索内容
      blockShow: 1,
      // 历史记录数据标签
      historydataList: [],
      // 热门搜索书籍标签
      hotdataList: [],
      // 搜索提示数据
      searchTipList: [],
      // 商品分类信息
      filterCategory: [],
      // 商品详细信息
      goodsList: [],
      // 价格排列顺序
      order: 'dedsc',
      // 商品分类id
      categoryId: '0',
      // 默认排序   id|price
      sort: 'id'

    }
  },
  created() {
    // 搜索数据的请求
    getSearchData().then((res) => {
      // console.log('这是搜索数据：')
      // console.log(res.data)
      // 输入框默认词语
      this.placeholderVal = res.data.defaultKeyword.keyword
      // 历史数据
      this.historydataList = res.data.historyKeywordList
      // 热门词
      this.hotdataList = res.data.hotKeywordList
    })
  },
  methods: {
    // 点击历史记录和热门搜索标签
    tagClick(vals) {
      // console.log(vals)
      // 搜索关键字
      this.value = vals
      this.onSearch(vals)
    },
    categorychange(val) {
      this.categoryId = val
      this.sort = 'id' // 默认是id可以不写

      // 这个value是输入的关键字
      this.onSearch(this.value)
    },
    priceChange(val) {
      this.order = val
      this.sort = 'price'
      this.onSearch(this.value)
    },
    // search 事件在点击键盘上的搜索/回车按钮后触发
    onSearch(val) {
      this.blockShow = 3
      // console.log('输入的值', val)
      getProductsListData({
        keyword: val,
        page: 1,
        size: 20,
        // 子组件（SearchProducts）传过来的数据
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort

      }).then((res) => {
        // console.log('商品信息：')
        // console.log(res.data)
        const { filterCategory, goodsList } = res.data
        const newArr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
        this.filterCategory = newArr
        this.goodsList = goodsList
      })
    },
    // 取消按钮
    onCancel() {
      this.$router.back()
    },
    // 搜索提示建议内容,输入框内容改变
    onInput(val) {
      this.blockShow = 2
      getSearchTipsData({ keyword: val }).then(res => {
        // console.log(res.data)
        this.searchTipList = res.data
      })
    }
  },
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProcucts
  }
}
</script>

<style lang="less" scoped>
.SearchPopup-container{
    width: 100%;
    height: 100%;
    position: absolute;
    // right: 0;
    top: 0;
    // background-color: rgba(0,0,0,0.5);
    background-color: #efefef;
}
</style>
